<template>
	<view class="content">
		<view class="friends">
			<view class="users" v-for='item,index in addusers' :key='index'>
				<view class="selected" @click="selected(index)">
					<image src="../../static/yes.png" mode="" v-if="item.selected"></image>
				</view>
				<view class="user-img">
					<image :src="item.userImg" mode=""></image>
				</view>
				<view class="name">
					{{ item.name }}
				</view>
			</view>
		</view>
		<view class="but">
			<view @click='onBuildGroup' class="buts" :class="{notsubmits:notsubmit}">
				创建群聊({{addnum}})
			</view>
		</view>
	</view>
</template>

<script>
	import datas from '../commons/js/data.js'
	
	export default {
		name:"addUsers",
		data() {
			return {
				notsubmit:true, // 不允许提交
				addnum:0, // 选中个数
				addusers:[]
			}
		},
		
		methods:{
			// 点击选中
			selected(e){
				this.addusers[e].selected = !this.addusers[e].selected
				// 计算选中个数
				this.addnum = 0
				this.users.forEach(v=>{
					if(v.selected){
						this.addnum++
					}
				})
				if(this.addnum!=0){
					this.notsubmit = false
				}else{
					this.notsubmit = true
				}
			},
			// 点击确定
			onBuildGroup(){
				
			}
			
		}
	}
</script>

<style>
	.friends{
		margin-top:500rpx;
		padding: 0 20rpx;
		display: flex;
		flex-direction: column;
		z-index: 10;
	}
	.title{
		text-align: left;
		font-size: 40rpx;
		padding: 30rpx 40rpx;
		margin-left: 40rpx;
		
	}
	.friends .users{
		font: 1;
		margin: 8rpx 0;
		
	}
	.friends .users .selected{
		float: left;
		margin: 15rpx;
		margin-left: 85rpx;
		width: 60rpx;
		height: 60rpx;
		background-color: rgba(255,228,49,0.5);
		border-radius: 20rpx;
	
	}
	.friends .users .selected image{
		width: 60rpx;
		height: 60rpx;
	}
	.friends .users .user-img{
		float: left;
		height: 90rpx;
	}
	.friends .users .user-img image{
		width: 90rpx;
		height: 90rpx;
		border-radius: 20rpx;
	}
	.friends .users .name{
		float: left;
		margin-left: 20rpx;
		font-size: 30rpx;
		width: 400rpx;
		height: 90rpx;
		line-height: 90rpx;
		display: -webkit-box;
		overflow: hidden; 
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
	
	/* but */
	 .but{
		/* 安全距离 */
		padding-bottom: var(--status-bar-height);
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 104rpx;
		background-color:rgba(244,244,244,0.96);
		z-index: 90;
	}
	 .but .buts{
		margin-left: 10%;
		margin-top: 7rpx;
		width: 80%;
		height: 90rpx;
		background-color:#f4ea2a ;
		text-align: center;
		color: white;
		font-size: 40rpx;
		line-height: 90rpx;
		/* z-index: 90; */
	}
	.but .notsubmits{
		background-color: #dedede;
	}
</style>
